<template>
<div>
<!-- 头部 -->
  <div style="background-color: #ff9501;color: #fff;height: 100px;width: 100%">
    <div  style="width: 1200px;height: 100px;margin: 0 auto;background-color: #ff9501;">
      <div style="float: left">
        <a href="/">
          <img src="../../../src/assets/images/logo.png" width="180" style="">
        </a>
      </div>
      <div style="float: left;margin-top: 30px;margin-left:30px;font: bolder 26px 微软雅黑;">
        个人中心
      </div>
      <div style="float: right;margin-right: 250px">
        <div  style="float: left">
          您好，
        <span v-text="user.nickname"></span>
        。
        </div>
        <div style="float:left;margin-top: -1px" >
          <el-link type="info">
          <span style="font-size: 16px;line-height: 16px">
            <i class="el-icon-switch-button"></i>
            退出登录
          </span>
          </el-link>
        </div>

      </div>
    </div>
  </div>

<!--  中间部分-->
  <el-row  style="width: 1200px;margin:0 auto;" >
    <!-- 左侧菜单 -->
    <el-col span="4" style="height: 1000px">
<!--   面包屑   -->
      <div >
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 10px;margin-bottom: 10px">
          <el-breadcrumb-item :to="{ path: '/product/main' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人中心</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
<!--     导航菜单 -->
      <div>
        <el-divider></el-divider>
        <el-menu
            router
            :default-active="activeMenuItemPath"
            class="el-menu-vertical-demo"
            active-text-color="#fff"
            >

          <div class="my-menu">
            我的车源
          </div>

          <div class="border">
            <el-menu-item index="/user-center/add-new-car">
              <i class="el-icon-upload"></i>
              <span slot="title">发布车源</span>
            </el-menu-item>
          </div>

          <div class="border">
            <el-menu-item index="/user-center/manage-car">
              <i class="el-icon-notebook-1"></i>
              <span slot="title">车源管理</span>
            </el-menu-item>
          </div>

          <div class="my-menu">
            我的收藏
          </div>

          <div class="border">
            <el-menu-item index="/user-center/favorite-car">
              <i class="el-icon-star-off"></i>
              <span slot="title">车源收藏</span>
            </el-menu-item>
          </div>


          <div class="my-menu">
            我的订单
          </div>

          <div class="border">
            <el-menu-item index="/user-center/selling-car">
              <i class="el-icon-s-goods"></i>
              <span slot="title">卖车订单</span>
            </el-menu-item>
          </div>

          <div class="border">
            <el-menu-item index="/user-center/buy-car">
              <i class="el-icon-goods"></i>
              <span slot="title">买车订单</span>
            </el-menu-item>
          </div>

          <div class="my-menu">
            我的资料
          </div>

          <div class="border">
            <el-menu-item index="/user-center/user-info">
              <i class="el-icon-user-solid"></i>
              <span slot="title">个人信息</span>
            </el-menu-item>
          </div>

          <div class="border">
            <el-menu-item index="/user-center/user-update-password">
              <i class="el-icon-edit"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>
          </div>

          <div class="my-menu">
            我的网店
          </div>

          <div class="border">
            <el-menu-item index="4">
              <i class="el-icon-s-shop"></i>
              <span slot="title">申请网店</span>
            </el-menu-item>
          </div>

        </el-menu>
      </div>
    </el-col>
<!--   右侧主要展示 -->
    <el-col span="20"  style="">

<!--      嵌套路由-->
      <div>
        <router-view/>
      </div>

    </el-col>
  </el-row>

<!-- 尾部 -->
  <div>
    <div style="background-color: #202024;text-align: center;color: #fff;padding: 50px 0">
      <div style="width: 1200px;height: 100px;margin: 5px auto;background-color: #202024;">
        <el-row>
          <el-col span="8">
            <p>毛孔二手车版权所有,致电10086</p>
            <p>致力于优质二手车</p>
            <p>更多详情www.MaoKong.com</p>
            <p>中山中心jsd2303</p>
          </el-col>
          <el-col span="8">
            <img src="../../../src/assets/images/Gu1.png" style="width:100px">
            <p style="color: #ef7c00">更多详情联系微信</p>
          </el-col>
          <el-col span="8">
            <img src="../../../src/assets/images/Gu2.png" style="width:100px">
            <p>更多详情联系微信</p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      activeMenuItemPath:"",
      user:{
        nickname:"暗闯寡妇村"
      }
    }
  },
  methods:{
    handleActiveMenuItem() {
      let path = this.$router.currentRoute.path;

      this.activeMenuItemPath = path;
    }
  },
  mounted() {
    this.handleActiveMenuItem();
  }
}
</script>
<style>
.ccc{
  border: 2px solid #0aa1ed
}
.border{
  border-left: 2px solid #DCDFE6;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
 }
body{
  margin: 0;
  padding: 0;
}
.el-menu-item, .el-submenu__title {
  height: 40px;
  line-height: 40px;
  list-style: none;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}
.my-menu{
  background-color: #e8e8e8;height:40px;line-height: 40px;font-size: 14px;padding:0 20px
}
.el-menu-item.is-active {
  background: #ff9501 !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
  color: #ff9501;
  cursor: pointer;
}
</style>